<template>
  <div class="challenge-list-page">
    <div class="container">
      <h1>环保挑战</h1>
      
      <!-- 搜索和筛选栏 -->
      <section class="search-filter-bar">
        <div class="search-box">
          <input type="text" placeholder="搜索挑战..." v-model="searchQuery">
          <button class="search-btn">🔍</button>
        </div>
        
        <div class="filter-options">
          <div class="filter-label">状态:</div>
          <div class="filter-buttons">
            <button 
              v-for="(option, index) in statusFilters" 
              :key="'status-'+index"
              :class="['filter-btn', { active: selectedStatus === option.value }]"
              @click="handleStatusFilter(option.value)"
            >
              {{ option.label }}
            </button>
          </div>
          
          <div class="filter-label">难度:</div>
          <div class="filter-buttons">
            <button 
              v-for="(option, index) in difficultyFilters" 
              :key="'diff-'+index"
              :class="['filter-btn', { active: selectedDifficulty === option.value }]"
              @click="handleDifficultyFilter(option.value)"
            >
              {{ option.label }}
            </button>
          </div>
          
          <div class="filter-label">分类:</div>
          <select v-model="selectedCategory" class="category-select" @change="handleCategoryFilter">
            <option value="">全部分类</option>
            <option value="daily">日常生活</option>
            <option value="food">饮食</option>
            <option value="energy">能源</option>
            <option value="transport">交通</option>
            <option value="waste">废弃物</option>
          </select>
        </div>
      </section>
      
      <!-- 排序选项 -->
      <section class="sort-options">
        <div class="results-count">
          找到 <span>{{ totalTasks }}</span> 个挑战
        </div>
        
        <div class="sort-dropdown">
          <span>排序: </span>
          <select v-model="sortOption" class="sort-select" @change="handleSortChange">
            <option value="popular">热门程度</option>
            <option value="newest">最新发布</option>
            <option value="pointsDesc">积分从高到低</option>
            <option value="pointsAsc">积分从低到高</option>
            <option value="durationAsc">持续时间从短到长</option>
            <option value="durationDesc">持续时间从长到短</option>
          </select>
        </div>
      </section>
      
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <div class="loading-spinner"></div>
        <p>正在加载挑战数据...</p>
      </div>
      
      <!-- 挑战列表 -->
      <section v-else class="challenges-container">
        <div v-if="tasks.length === 0" class="no-results">
          <div class="no-results-icon">🔍</div>
          <h3>未找到匹配的挑战</h3>
          <p>请尝试调整搜索条件或筛选选项</p>
        </div>
        
        <div v-else class="challenges-grid">
          <!-- 挑战卡片 -->
          <div class="challenge-card" v-for="(challenge, index) in tasks" :key="challenge.id || index" @click="goToChallenge(challenge.id)">
            <div :class="['challenge-image', getGradientClass(index)]">
              <span :class="['challenge-status', getStatusClass(challenge.taskStatus)]">{{ getStatusText(challenge.taskStatus) }}</span>
              <div v-if="challenge.taskDifficulty !== undefined" class="challenge-difficulty">
                <span v-for="n in (challenge.taskDifficulty + 1)" :key="n">⬤</span>
              </div>
            </div>
            <div class="challenge-info">
              <h3>{{ challenge.taskName || '未命名任务' }}</h3>
              <p class="challenge-description">{{ challenge.taskDescription || '暂无描述' }}</p>
              
              <div v-if="challenge.progress" class="challenge-progress">
                <div class="progress-container">
                  <div class="progress-bar" :style="{ width: challenge.progress + '%' }"></div>
                </div>
                <span>{{ challenge.progressText || '' }}</span>
              </div>
              
              <div class="challenge-tags">
                <span class="tag">{{ challenge.taskType || getDefaultTaskType(challenge) }}</span>
                <span class="tag date-tag" v-if="challenge.startTime">
                  {{ formatDate(challenge.startTime) }} 至 {{ formatDate(challenge.endTime) }}
                </span>
              </div>
              
              <div class="challenge-meta">
                <span>👥 {{ challenge.hot || 0 }} 参与者</span>
                <span>🏆 {{ challenge.points || 100 }} 积分</span>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      <!-- 分页 -->
      <div class="pagination" v-if="totalPages > 0">
        <button 
          class="page-btn prev" 
          :disabled="currentPage === 1"
          @click="goToPrevPage"
        >
          ← 上一页
        </button>
        
        <button 
          v-for="page in displayedPageNumbers" 
          :key="page" 
          :class="['page-btn', { active: currentPage === page }]"
          @click="goToPage(page)"
        >
          {{ page }}
        </button>
        
        <button 
          class="page-btn next" 
          :disabled="currentPage === totalPages"
          @click="goToNextPage"
        >
          下一页 →
        </button>
        
        <span class="page-info">{{ currentPage }} / {{ totalPages }} 页</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getTaskList } from '@/api/task';

export default {
  name: 'ChallengeListPage',
  data() {
    return {
      searchQuery: '',
      selectedStatus: 'all',
      selectedDifficulty: '',
      selectedCategory: '',
      sortOption: 'popular',
      currentPage: 1,
      itemsPerPage: 9,
      loading: false,
      totalTasks: 0,
      tasks: [],
      
      statusFilters: [
        { label: '全部', value: 'all' },
        { label: '即将开始', value: 'upcoming' },
        { label: '进行中', value: 'ongoing' },
        { label: '已结束', value: 'completed' }
      ],
      
      difficultyFilters: [
        { label: '全部', value: '' },
        { label: '初级', value: 0 },
        { label: '中级', value: 1 },
        { label: '高级', value: 2 }
      ],
      
      // 分类ID映射
      categoryMap: {
        '': null,  // 全部分类
        'daily': 1,  // 日常生活
        'food': 2,   // 饮食
        'energy': 3, // 能源
        'transport': 4, // 交通
        'waste': 5   // 废弃物
      },
      
      // 保留模拟数据用于备用
      mockChallenges: [
        // ... 原有的模拟数据 ...
      ]
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalTasks / this.itemsPerPage);
    },
    
    // 计算要显示的页码范围
    displayedPageNumbers() {
      const totalPages = this.totalPages;
      const currentPage = this.currentPage;
      const displayCount = 5; // 显示5个页码按钮
      
      let start = Math.max(1, currentPage - Math.floor(displayCount / 2));
      let end = Math.min(totalPages, start + displayCount - 1);
      
      // 如果end到达最大值，相应地调整start
      if (end === totalPages) {
        start = Math.max(1, end - displayCount + 1);
      }
      
      // 生成页码数组
      let pages = [];
      for (let i = start; i <= end; i++) {
        pages.push(i);
      }
      
      return pages;
    }
  },
  created() {
    // 组件创建时加载数据
    this.fetchTasks();
  },
  methods: {
    // 从API获取任务列表
    fetchTasks() {
      this.loading = true;
      
      // 基本分页参数
      const params = {
        pageNo: this.currentPage,
        pageSize: this.itemsPerPage
      };
      
      // 添加状态筛选条件（如果不是"全部"）
      if (this.selectedStatus !== 'all') {
        params.taskStatus = this.getTaskStatusValue(this.selectedStatus);
      }
      
      // 添加难度筛选条件（如果不是"全部"）
      if (this.selectedDifficulty !== '') {
        params.taskDifficulty = this.selectedDifficulty;
      }
      
      // 添加分类筛选条件（如果不是"全部"）
      if (this.selectedCategory && this.categoryMap[this.selectedCategory] !== null) {
        params.categoryId = this.categoryMap[this.selectedCategory];
      }
      
      // 添加搜索条件（如果有）
      if (this.searchQuery) {
        params.taskName = this.searchQuery;
      }
      
      console.log('获取任务列表，当前筛选条件:');
      console.log(`- 状态: ${this.selectedStatus}`);
      console.log(`- 难度: ${this.selectedDifficulty !== '' ? this.selectedDifficulty : '全部'}`);
      console.log(`- 分类: ${this.selectedCategory || '全部'}`);
      console.log(`- 搜索: ${this.searchQuery || '无'}`);
      console.log(`- 页码: ${this.currentPage}, 每页数量: ${this.itemsPerPage}`);
      console.log('完整请求参数:', JSON.stringify(params, null, 2));
      
      // 存储初始总记录数，用于比较
      const initialTotalTasks = this.totalTasks;
      
      getTaskList(params)
        .then(response => {
          console.log('获取任务列表成功:', response);
          
          // 详细打印返回的数据结构
          if (response) {
            console.log('响应结构:', response);
            
            // 针对后端特定结构处理
            let taskList = [];
            let totalCount = null; // 初始化为null，表示尚未从响应中提取总记录数
            
            // 递归函数，尝试在对象中查找特定键
            const findInObject = (obj, keys) => {
              if (!obj || typeof obj !== 'object') return null;
              
              for (const key of keys) {
                if (key in obj && obj[key] !== undefined && obj[key] !== null) {
                  return obj[key];
                }
              }
              
              // 递归搜索嵌套对象
              for (const key in obj) {
                if (typeof obj[key] === 'object') {
                  const result = findInObject(obj[key], keys);
                  if (result !== null) return result;
                }
              }
              
              return null;
            };
            
            // 首先尝试获取数据列表
            if (response.data && response.data.result) {
              // 后端返回的结构: response.data.result
              console.log('找到result数组:', response.data.result);
              taskList = response.data.result;
            } else if (response.data && response.data.data && response.data.data.result) {
              // 嵌套一层的结构: response.data.data.result
              console.log('找到嵌套的result数组:', response.data.data.result);
              taskList = response.data.data.result;
            } else if (Array.isArray(response.data)) {
              // 如果直接返回数组
              taskList = response.data;
            } else if (response.data && response.data.list) {
              // 如果返回的是带有list属性的对象
              taskList = response.data.list;
            } else {
              // 尝试查找任何数组
              const possibleArray = findInObject(response, ['result', 'list', 'items', 'records']);
              if (possibleArray && Array.isArray(possibleArray)) {
                taskList = possibleArray;
                console.log('通过递归搜索找到的数据数组:', possibleArray);
              } else {
                console.error('无法找到任务数据数组');
              }
            }
            
            // 然后尝试获取总记录数
            // 常见的总记录数字段名
            const totalCountKeys = ['total', 'totalItems', 'totalRecords', 'count', 'end'];
            totalCount = findInObject(response, totalCountKeys);
            
            if (totalCount !== null) {
              console.log(`找到总记录数: ${totalCount}`);
            } else {
              console.warn('未找到总记录数字段，尝试其他方法估算');
              
              // 尝试从当前数据和分页信息估算总记录数
              if (taskList.length > 0) {
                // 方法1: 如果有end字段但不是总记录数
                const end = findInObject(response, ['end']);
                if (end !== null && typeof end === 'number') {
                  totalCount = end;
                  console.log(`使用end字段作为总记录数: ${totalCount}`);
                } 
                // 方法2: 如果有pageInfo
                else {
                  const pageNo = findInObject(response, ['pageNo', 'page', 'pageNum']);
                  const pageSize = findInObject(response, ['pageSize', 'size', 'limit']);
                  
                  if (pageNo !== null && pageSize !== null) {
                    // 如果当前页数据不满，说明是最后一页
                    if (taskList.length < pageSize) {
                      totalCount = (pageNo - 1) * pageSize + taskList.length;
                      console.log(`从分页信息估算总记录数(最后一页): ${totalCount}`);
                    } 
                    // 否则至少有 pageNo * pageSize 条数据
                    else if (initialTotalTasks === 0) {
                      // 只有在首次加载时才设置这个估算值
                      totalCount = pageNo * pageSize + 1; // +1确保有下一页
                      console.log(`从分页信息估算总记录数(非最后页): ${totalCount}+`);
                    } else {
                      // 否则保留原有总记录数
                      totalCount = initialTotalTasks;
                    }
                  } else if (initialTotalTasks > 0) {
                    // 保留之前的总记录数
                    totalCount = initialTotalTasks;
                    console.log(`保留现有总记录数: ${totalCount}`);
                  } else {
                    // 无法估算，假设至少有当前页 + 1页
                    totalCount = Math.max(taskList.length * 2, 10);
                    console.log(`无法估算，设置默认总记录数: ${totalCount}`);
                  }
                }
              } else if (initialTotalTasks > 0) {
                // 如果没有数据但有之前的总记录数，保留
                totalCount = initialTotalTasks;
              } else {
                // 彻底无法估算
                totalCount = 0;
              }
            }
            
            console.log('最终解析的任务列表:', taskList);
            console.log('最终确定的任务总数:', totalCount);
            console.log('当前页码:', this.currentPage);
            console.log('每页条数:', this.itemsPerPage);
            console.log('计算的总页数:', Math.ceil(totalCount / this.itemsPerPage));
            
            this.tasks = taskList;
            this.totalTasks = totalCount;
          }
        })
        .catch(error => {
          console.error('获取任务列表失败:', error);
          this.tasks = [];
          // 出错时不重置总记录数，保留之前的值
        })
        .finally(() => {
          this.loading = false;
          // 分页状态检查
          console.log('分页状态检查:');
          console.log('- 当前页码:', this.currentPage);
          console.log('- 总记录数:', this.totalTasks);
          console.log('- 总页数:', this.totalPages);
          console.log('- 显示的页码按钮:', this.displayedPageNumbers);
        });
    },
    
    // 分页方法
    goToPage(page) {
      if (this.currentPage !== page) {
        this.currentPage = page;
        this.fetchTasks();
      }
    },
    
    goToNextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.fetchTasks();
      }
    },
    
    goToPrevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.fetchTasks();
      }
    },
    
    // 筛选方法
    handleStatusFilter(status) {
      console.log(`状态筛选变更: ${this.selectedStatus} -> ${status}`);
      this.selectedStatus = status;
      this.currentPage = 1; // 重置到第一页
      this.fetchTasks();
    },
    
    handleDifficultyFilter(difficulty) {
      console.log(`难度筛选变更: ${this.selectedDifficulty} -> ${difficulty}`);
      this.selectedDifficulty = difficulty;
      this.currentPage = 1;
      this.fetchTasks();
    },
    
    handleCategoryFilter() {
      console.log(`分类筛选变更: 选择了 ${this.selectedCategory}`);
      this.currentPage = 1;
      this.fetchTasks();
    },
    
    handleSortChange() {
      console.log(`排序方式变更: 选择了 ${this.sortOption}`);
      this.currentPage = 1;
      this.fetchTasks();
    },
    
    // 导航到挑战详情页
    goToChallenge(id) {
      this.$router.push(`/challenge/${id}`);
    },
    
    // 辅助方法 - 获取状态样式类
    getStatusClass(status) {
      switch(status) {
        case 1: return 'ongoing';
        case 0: return 'upcoming';
        case 2: case 3: return 'completed';
        default: return '';
      }
    },
    
    // 辅助方法 - 获取状态文本
    getStatusText(status) {
      switch(status) {
        case 1: return '进行中';
        case 0: return '即将开始';
        case 2: return '已完成';
        case 3: return '已过期';
        default: return '未知状态';
      }
    },
    
    // 辅助方法 - 获取任务状态值
    getTaskStatusValue(statusName) {
      switch(statusName) {
        case 'ongoing': return 1;  // 进行中
        case 'upcoming': return 0; // 即将开始
        case 'completed': return 2; // 已结束
        default: return null;
      }
    },
    
    // 辅助方法 - 获取随机梯度样式类 
    getGradientClass(index) {
      const gradients = ['green-gradient', 'blue-gradient', 'purple-gradient', 'orange-gradient'];
      return gradients[index % gradients.length];
    },
    
    // 辅助方法 - 获取排序字段
    getSortField(sortOption) {
      switch(sortOption) {
        case 'newest': return 'createTime';
        case 'pointsDesc': 
        case 'pointsAsc': return 'pointReward';
        case 'durationAsc':
        case 'durationDesc': return 'duration';
        case 'popular':
        default: return 'participantCount';
      }
    },
    
    // 辅助方法 - 获取排序顺序
    getSortOrder(sortOption) {
      switch(sortOption) {
        case 'pointsAsc':
        case 'durationAsc': return 'asc';
        default: return 'desc';
      }
    },
    
    // 辅助方法 - 获取默认任务类型
    getDefaultTaskType(challenge) {
      // 根据任务名称或描述推断任务类型
      const name = challenge.taskName || '';
      const desc = challenge.taskDescription || '';
      const text = name + desc;
      
      if (text.includes('出行') || text.includes('步行') || text.includes('自行车')) {
        return '绿色出行';
      } else if (text.includes('蔬菜') || text.includes('饮食') || text.includes('吃') || text.includes('食')) {
        return '健康饮食';
      } else if (text.includes('烟')) {
        return '健康生活';
      } else if (text.includes('节能') || text.includes('电')) {
        return '节能减排';
      } else if (text.includes('垃圾') || text.includes('回收')) {
        return '垃圾分类';
      } else {
        return '环保挑战';
      }
    },
    
    // 辅助方法 - 格式化日期时间戳
    formatDate(timestamp) {
      if (!timestamp) return '未知日期';
      
      try {
        // 确保timestamp是数字
        const ts = typeof timestamp === 'string' ? parseInt(timestamp) : timestamp;
        const date = new Date(ts);
        
        // 检查日期是否有效
        if (isNaN(date.getTime())) {
          console.warn('无效的日期时间戳:', timestamp);
          return '未知日期';
        }
        
        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
      } catch (error) {
        console.error('格式化日期出错:', error);
        return '未知日期';
      }
    }
  }
}
</script>

<style>
/* 使用全局样式，不用scoped */
@import '../styles/Challenge.css';

.challenge-list-page {
  padding: 20px;
  margin-top: 20px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

h1 {
  font-size: 28px;
  margin-bottom: 25px;
  color: #333;
  text-align: center;
}

/* 搜索和筛选栏样式 */
.search-filter-bar {
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

.search-box {
  position: relative;
  margin-bottom: 15px;
}

.search-box input {
  width: 100%;
  padding: 12px 45px 12px 15px;
  border: 1px solid #ddd;
  border-radius: 25px;
  font-size: 16px;
  transition: border-color 0.3s ease;
}

.search-box input:focus {
  border-color: #4CAF50;
  outline: none;
}

.search-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 5px;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
}

.filter-label {
  font-weight: 600;
  color: #333;
  margin-right: 5px;
}

.filter-buttons {
  display: flex;
  gap: 8px;
  margin-right: 15px;
}

.filter-btn {
  background: none;
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 6px 15px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.filter-btn:hover, .filter-btn.active {
  background-color: #4CAF50;
  color: white;
  border-color: #4CAF50;
}

.category-select {
  padding: 8px 15px;
  border-radius: 20px;
  border: 1px solid #ddd;
  font-size: 14px;
  background-color: white;
  cursor: pointer;
}

/* 排序选项样式 */
.sort-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.results-count {
  font-size: 15px;
  color: #666;
}

.results-count span {
  font-weight: 600;
  color: #4CAF50;
}

.sort-dropdown {
  display: flex;
  align-items: center;
}

.sort-dropdown span {
  margin-right: 8px;
  color: #666;
}

.sort-select {
  padding: 8px 15px;
  border-radius: 20px;
  border: 1px solid #ddd;
  font-size: 14px;
  background-color: white;
  cursor: pointer;
}

/* 挑战列表样式 */
.challenges-container {
  min-height: 500px;
}

.no-results {
  text-align: center;
  padding: 80px 0;
  color: #666;
}

.no-results-icon {
  font-size: 50px;
  margin-bottom: 15px;
  opacity: 0.5;
}

.no-results h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.challenges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 25px;
  margin-bottom: 30px;
}

.challenge-card {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.challenge-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.challenge-image {
  position: relative;
  height: 180px;
  overflow: hidden;
}

.green-gradient {
  background: linear-gradient(135deg, #43a047 0%, #1de9b6 100%);
}

.blue-gradient {
  background: linear-gradient(135deg, #1976d2 0%, #64b5f6 100%);
}

.purple-gradient {
  background: linear-gradient(135deg, #6a1b9a 0%, #ce93d8 100%);
}

.orange-gradient {
  background: linear-gradient(135deg, #e65100 0%, #ffb74d 100%);
}

.challenge-status {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: white;
}

.challenge-difficulty {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: flex;
  gap: 3px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
}

.ongoing {
  background-color: #4CAF50;
}

.upcoming {
  background-color: #2196F3;
}

.completed {
  background-color: #9E9E9E;
}

.challenge-info {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.challenge-info h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
  line-height: 1.3;
}

.challenge-description {
  color: #666;
  font-size: 14px;
  margin-bottom: 15px;
  line-height: 1.5;
  flex-grow: 1;
}

.challenge-progress {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.progress-container {
  flex: 1;
  height: 6px;
  background-color: #f0f0f0;
  border-radius: 3px;
  overflow: hidden;
  margin-right: 10px;
}

.progress-bar {
  height: 100%;
  background-color: #4CAF50;
}

.challenge-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
}

.tag {
  background-color: #f0f0f0;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  color: #666;
}

.date-tag {
  background-color: #e8f5e9;
  color: #2e7d32;
}

.challenge-meta {
  display: flex;
  justify-content: space-between;
  color: #666;
  font-size: 13px;
  margin-top: auto;
}

/* 分页样式 */
.pagination {
  display: flex;
  justify-content: center;
  margin: 30px 0;
}

.page-btn {
  border: 1px solid #ddd;
  background: none;
  padding: 8px 15px;
  margin: 0 5px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.page-btn:hover, .page-btn.active {
  background-color: #4CAF50;
  color: white;
  border-color: #4CAF50;
}

.page-btn.next {
  margin-left: 10px;
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-btn.prev {
  margin-right: 10px;
}

.page-info {
  margin: 0 10px;
  color: #666;
  font-size: 14px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .challenges-grid {
    grid-template-columns: 1fr;
  }
  
  .filter-options {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .filter-label {
    margin-bottom: 5px;
  }
  
  .filter-buttons {
    width: 100%;
    justify-content: space-between;
    margin-right: 0;
  }
  
  .filter-btn {
    flex: 1;
    text-align: center;
    padding: 6px 0;
  }
  
  .category-select {
    width: 100%;
  }
  
  .sort-options {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .results-count {
    margin-bottom: 10px;
  }
  
  .sort-dropdown {
    width: 100%;
  }
  
  .sort-select {
    flex: 1;
  }
  
  .pagination {
    flex-wrap: wrap;
  }
}

/* 加载动画样式 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #4CAF50;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style> 